<template>
	<view class="main">
		<view class="head">
			<view class="head-left">
				<view class="avatar"></view>
				<view class="info">
					<view class="info-top">
						<view class="name">用户名</view>
						<view class="tag">活动精选</view>
					</view>
					<view class="info-time">2小时以前发布</view>
				</view>
			</view>
			<view class="head-right">14:25</view>
		</view>
		<view class="content">
			内容内容内容内容，内容内容，内容内容内容内容内容，内容内容，内容内容内容内容内容，内容内容，内容
		</view>
		<view class="comment">
			<view class="comment-head">
				<view class="comment-num">评论158</view>
				<view class="like-num">188赞</view>
			</view>
			<view class="commonent-list">
				<article-item></article-item>
				<article-item></article-item>
				<article-item></article-item>
				<article-item></article-item>
			</view>
		</view>
		<view class="foot">
			<view class="foot-content">
				<view class="foot-left">
					<van-icon name="edit" style="margin-right: 14rpx;" />写评论。。。
				</view>
				<view class="foot-right">
					<van-icon name="chat-o" badge="99+" />
					<van-icon name="good-job-o" />
					<van-icon name="share-o" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import articleItem from "./components/articleItem/index.vue"
	export default {
		components: {
			articleItem
		},
		onLoad(options) {
			console.log('options.id',options.id)
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.head {
			padding: 15rpx 30rpx 30rpx;
			display: flex;
			justify-content: space-between;
			&-left {
				display: flex;
				.avatar {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					background-color: #289958;
				}
				.info {
					margin-left: 12rpx;
					&-top {
						display: flex;
						.name {
							font-size: 16px;
							font-weight: 700;
						}
						.tag {
							margin-left: 26rpx;
							height: 36rpx;
							line-height: 36rpx;
							border-radius: 18rpx;
							border: 2rpx solid #FCAC00;
							font-size: 12px;
							color: #FCAC00;
							padding: 0 18rpx;
						}
					}
					&-time {
						color: #BCBCBC;
						font-size: 12px;
						margin-top: 6rpx;
					}
				}
			}
			&-right {
				color: #666;
			}
		}
		.content {
			padding: 0 30rpx 34rpx;
			
		}
		.comment {
			border-top: 12rpx solid #F2F2F2;
			padding: 30rpx;
			padding-bottom:calc(constant(safe-area-inset-bottom) + 100rpx);
			padding-bottom:calc(env(safe-area-inset-bottom) + 100rpx);
			&-head {
				display: flex;
				justify-content: space-between;
				.comment-num {
					color: #232323;
					font-size: 14px;
					font-weight: 700;
				}
				.like-num {
					color: #9B9B9B;
					font-size: 12px;
					font-weight: 400;
				}
			}
		}
		.foot {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			box-sizing: border-box;
			background-color: #fff;
			padding-bottom:constant(safe-area-inset-bottom);
			padding-bottom:env(safe-area-inset-bottom);
			
			border-top: 2rpx solid #eeeeee;
			&-content {
				padding: 12rpx 30rpx;
				display: flex;
				align-items: center;
				.foot-left {
					width: 350rpx;
					background-color: #F2F2F2;
					border-radius: 100px;
					padding: 14rpx 18rpx;
					font-size: 12px;
				}
				.foot-right {
					margin-left: 34rpx;
					flex: 1;
					display: flex;
					justify-content: space-between;
					font-size: 24px;
					
				}
			}
		}
	}
</style>
